<template>
  <div class="movieTitle">影厅管理</div>
  <div class="roomContent">
        <el-col :span="18">
      <div>
        <div class="seat">
          <div class="seat-example">
            <div>
              <img class="zwimg" src="../../assets/images/wx.png" alt="" />
            </div>
            <div class="selectable-example example">
              <span>可选座位</span>
            </div>
          </div>
          <div class="seat-example">
            <div>
              <img class="zwimg" src="../../assets/images/yx.png" alt="" />
            </div>
            <div class="selectable-example example">
              <span>已选座位</span>
            </div>
          </div>
          <div class="seat-example">
            <div>
              <img class="zwimg" src="../../assets/images/yd.png" alt="" />
            </div>
            <div class="selectable-example example">
              <span>已预订座位</span>
            </div>
          </div>
          <div class="seat-example">
            <div>
              <img class="zwimg" src="../../assets/images/ys.png" alt="" />
            </div>
            <div class="selectable-example example">
              <span>已售座位</span>
            </div>
          </div>
        </div>
        <div class="Cinamecenten">
          <div class="screen">银幕中央</div>
        </div>
        <div class="seats-wrapper">
          <div class="row" v-for="row in rc.row" :key="row">
            <span
              class="seattable"
              v-for="col in rc.col"
              :key="col"
              @click="seat(row, col)"
            >
              <img
                class="seatsize"
                v-if="selected(row + '排' + col + '座').status == 0"
                src="../../assets/images/wx.png"
                alt=""
              />
              <img
                class="seatsize"
                v-else-if="selected(row + '排' + col + '座').status == 1"
                src="../../assets/images/yx.png"
                alt=""
              />
              <img
                class="seatsize"
                v-else-if="selected(row + '排' + col + '座').status == 2"
                src="../../assets/images/yd.png"
                alt=""
              />
              <img
                class="seatsize"
                v-else
                src="../../assets/images/ys.png"
                alt=""
              />
            </span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="6" style="margin-left: 50px">
      <el-row>
        <el-col class="moinfo">
          <el-select v-model="cname" clearable placeholder="影院">
            <el-option
              v-for="item in cinemalist"
              :key="item"
              :value="item.cname"
              @click="cinemaclick(item.cid)"
            />
          </el-select>
        </el-col>
        <el-col class="moinfo">
          <el-select v-model="movies" placeholder="电影名称：">
            <el-option
              v-for="item in movielist"
              :key="item"
              :value="item.chinese_name"
              @click="movieclick(item.mid)"
            />
          </el-select>
        </el-col>
        <el-col class="moinfo">
          <el-select v-model="session" placeholder="时间段：">
            <el-option
              v-for="item in sessionlist"
              :key="item"
              :value="item.time_quantum"
              @click="sessionclick(item.id)"
            />
          </el-select>
        </el-col>
        <el-col class="moinfo">
          <el-select v-model="room" placeholder="厅号：">
            <el-option
              v-for="item in roomlist"
              :key="item"
              :value="item.r_name"
              @click="roomclick(item.id, item.row, item.col)"
            />
          </el-select>
        </el-col>
        <el-col class="moinfo">
          <el-input
            v-model="rc.row"
            style="width: 50px"
            @input="inputChange(rc)"
          />X
          <el-input
            v-model="rc.col"
            style="width: 50px"
            @input="inputChange(rc)"
          />
          <el-button
            type="primary"
            plain
            style="padding: 5px; margin: 10px 0 10px 5px"
            @click="SavaRC()"
            >保存行列数</el-button
          >
        </el-col>
        <el-col class="moinfo">
          <div>座位号:</div>
          <el-tag
            v-for="tag in tagData"
            :key="tag"
            class="mx-1"
            :disable-transitions="false"
            size="large"
          >
            {{ tag.seat }}
          </el-tag>
        </el-col>
      </el-row>
    </el-col>
  </div>
</template>
<script lang="ts">
import { computed, onMounted, reactive, ref, inject, watch } from "vue";
import { FormInstance, ElMessage, ElMessageBox, ElLoading } from "element-plus";
import { CollectionTag } from "@element-plus/icons-vue";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import { postSelectCinemaAPI } from "../../api/userinfo";
import { useStore } from "vuex";
export default {
  components: { CollectionTag },
  setup() {
    onMounted(() => {
      cinema();
    });
    const reload = inject("reload", () => {});
    const router = useRoute();
    const store = useStore();
    const userInfo = computed(() => {
      return store.state.user.userInfo;
    });
    const screenlist = ref([]);
    const cname = ref("");
    const cinemalist = ref([]);
    const seats = ref("");
    const session = ref("");
    const selectData = ref([]);
    const tagData = ref([]);
    const sessionlist = computed(() => {
      return store.state.room.sessionInfo;
    });
    const room = ref("");
    const roomlist = computed(() => {
      return store.state.room.roomInfo;
    });
    const movies = ref("");
    const movielist = computed(() => {
      return store.state.movie.movieList;
    });
    const cinema = async () => {
      await postSelectCinemaAPI().then((res) => {
        res.data.forEach((Element: never) => {
          cinemalist.value.push(Element);
        });
      });
      store.dispatch("SET_MOVIELIST");
      store.dispatch("SET_SESSION");
      store.dispatch("SET_ROOM");
    };
    const seat = (row: any, col: any) => {
      if (
        roomid.value != 0 &&
        mid.value != 0 &&
        sessionid.value != 0 &&
        cid.value
      ) {
        let datas = {
          mid: mid.value,
          session_id: sessionid.value,
          room_id: roomid.value,
          cinema_id: cid.value,
          seat: row + "排" + col + "座",
          flag: 1,
        };
        switch (selected(row + "排" + col + "座").status) {
          case 0:
            tagData.value.push(datas as never);
            selectData.value.push(datas as never);
            break;
          case 1:
            selectData.value = selectData.value.filter((el: any) => {
              return el.seat != row + "排" + col + "座";
            });
            tagData.value = tagData.value.filter((element: any) => {
              return element.seat != row + "排" + col + "座";
            });
            break;
          default:
            ElMessage.warning("该位置已被预定或出售");
        }
      } else {
        ElMessage.warning("请选择右侧的数据!!");
      }
    };
    const selected = (num: any) => {
      let filterData = {
        id: 0,
        status: 0,
      };
      selectData.value.forEach((item: any) => {
        if (
          item.seat.indexOf(num) != -1 &&
          item.room_id == roomid.value &&
          item.mid == mid.value &&
          item.session_id == sessionid.value &&
          item.cinema_id == cid.value
        ) {
          filterData.status = item.flag;
        }
        filterData.id = item.room_id;
      });
      return filterData;
    };
    let cid = ref(0);
    const cinemaclick = (id: any) => {
      cid.value = id;
    };
    let sessionid = ref(0);
    const sessionclick = (id: any) => {
      sessionid.value = id;
    };
    let roomid = ref(0);
    const rc = reactive({
      row: ref(5),
      col: ref(5),
    });
    const roomclick = (id: any, r: any, c: any) => {
      roomid.value = id;
      rc.row = r;
      rc.col = c;
      store
        .dispatch("SET_SEATINFO", {
          mid: mid.value,
          rid: roomid.value,
          sid: sessionid.value,
          cid: cid.value,
        })
        .then((data) => {
          selectData.value = data;
          console.log(data);
          
        });
    };
    let mid = ref(0);
    const movieclick = (id: any) => {
      mid.value = id;
    };
    const inputChange = (param: any) => {
      rc.row = param.row * 1;
      rc.col = param.col * 1;
    };
    const SavaRC = () => {
      if (roomid.value != 0) {
        store.dispatch("SET_ROOMRC", {
          id: roomid.value,
          row: rc.row,
          col: rc.col,
        });
      } else {
        ElMessage.warning("请选择需要修改的影厅!!");
      }
    };

    return {
      SavaRC,
      inputChange,
      userInfo,
      rc,
      roomclick,
      room,
      roomlist,
      session,
      sessionlist,
      movies,
      movielist,
      movieclick,
      selectData,
      router,
      seat,
      selected,
      tagData,
      screenlist,
      cinemalist,
      cname,
      seats,
      cinemaclick,
      sessionclick,
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.el-main {
  overflow: hidden;
}
.banner {
  width: 100%;
  min-width: 1200px;
  background: #392f59
    url(https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/banner_bg.f7fd103e3b8c16b6f449cce43fc57f45.png)
    no-repeat 50%;
  margin-bottom: 50px;
}
.wrapper {
  width: 1200px;
  margin: 0 auto;
  height: 376px;
  position: relative;
}
.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.celeInfo-left {
  width: 300px;
  float: left;
  position: relative;
  top: 70px;
  overflow: hidden;
  z-index: 9;
}
.avatar-shadow {
  position: relative;
  margin: 0 30px;
  width: 240px;
  height: 330px;
  padding-bottom: 40px;
  background: url()
    no-repeat bottom;
}
.avatar {
  border: 4px solid #fff;
  height: 322px;
  width: 232px;
}
.movie-ver {
  position: absolute;
  top: 4px;
  left: -2px;
  font-size: 12px;
  color: #fff;
}
.celeInfo-right {
  position: relative;
  margin-right: 30px;
  margin-left: 300px;
  margin-top: 70px;
}
.movie-brief-container {
  position: absolute;
  color: #fff;
  font-size: 14px;
  z-index: 1;
}
.name {
  width: 900px;
  margin-top: 0;
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 64px;
  color: #fff;
}
.ename {
  width: 340px;
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 14px;
}
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 20px;
}
.movie-brief-container ul {
  width: 250px;
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.btn {
  display: inline-block;
  padding: 2px 15px;
  line-height: 25px;
  font-size: 15px;
  color: #fff;
}
.index-right {
  margin-left: 54px;
  font-size: 12px;
}
.info-num {
  font-size: 30px;
  color: #ffc600;
  height: 30px;
  line-height: 30px;
}
.el-rate {
  padding: 20px;
}
.aa {
  margin: 10px 100px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #ed6a24;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs {
  margin: 10px 100px;
}

.el-tabs__item {
  font-size: 18px !important;
}
.nav li {
  font-size: 18px;
  margin-bottom: 60px;
}
.content {
  margin-top: 20px;
  margin-left: 40px;
}
.Tinfo {
  display: flex;
  padding: 30px;
}
.imginfo {
  margin: 20px;
}
.btn_buy {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.zwimg {
  height: 30px;
  line-height: 30px;
  margin-left: 13px;
}
.seat {
  display: flex;
  padding: 20px;
  justify-content: center;
}
.seat-example {
  margin-left: 30px;
}
.screen {
  width: 500px;
  padding-top: 50px;
  text-align: center;
  font-size: 16px;
  color: #666;
  background: url()
    no-repeat;
  background-position-x: center;
  position: relative;
  margin-bottom: 40px;
}
.row {
  width: 500px;
  display: flex;
  justify-content: center;
}
.seattable {
  display: inline-block;
  font-size: 0;
  width: 30px;
  height: 26px;
  margin: 0 5px;
  background-position: 0 1px;
}
.seatsize {
  width: 30px;
  height: 26px;
}
.seatbanner {
  display: flex;
}
.ticketinfo {
  border: 1px solid salmon;
  display: flex;
  width: 200px;
}
.seattag {
  padding: 20px;
}
.el-tag--large {
  display: inline-flex;
  width: 80px;
  margin: 5px 10px;
}
.moinfo {
  margin: 10px;
  font-size: 16px;
}
.avatarimg {
  margin-right: 20px;
}
.dcontent {
  width: 600px;
  word-wrap: break-word;
  word-break: break-all;
  text-indent: 2em;
  color: #666;
  margin-bottom: 30px;
}
.userpanel {
  width: 100px;
  height: 120px;
  margin-bottom: 30px;
}
.textconten {
  word-wrap: break-word;
  word-break: break-all;
  text-indent: 2em;
  color: #666;
}
.box-card {
  width: 280px;
  height: 150px;
  padding: 0;
  margin-top: 20px;
  overflow: hidden;
}
.box-card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.el-card:hover {
  box-shadow: -10px 0 10px rgb(0, 0, 0, 0.5);
}
.movieTitle {
  font-size: 1.5rem;
  margin: 20px 0 10px 0;
}
.roomContent{
  margin-left: 20%;
}
</style>